<template>
  <div id="map" class="station-map">我是地图</div>
</template>

<script setup>
import { onMounted, ref,onActivated, watch } from "vue";
import { configList, getMap } from "@/api";
const lng = ref(0);
const lat = ref(0);
const configListData = ref([]);
const visible = ref(false); // 是否显示
let map;
// 暴露给父组件的方法
const emit = defineEmits(["location"]);
onMounted(() => {

});
defineOptions({
  name: "StationMap",
});
// 每次组件激活时都会执行（如果使用了 Keep-Alive）
onActivated(() => {
  console.log('组件被激活了，每次都会执行');
  // 在这里添加你每次都需要执行的逻辑
  // 比如刷新数据、重置状态等
});

// 监听抽屉显示状态，每次打开时执行
watch(visible, (newVal) => {
  if (newVal) {
    console.log('抽屉打开了，每次都会执行');
    // 在这里添加每次打开抽屉时都需要执行的逻辑
    // 比如刷新数据、重置状态等
  }
});
const initMap = () => {
  // 初始化地图，逻辑写在这里
  console.log("初始化地图");
  getConfigList();
};
const getConfigList = () => {
  configList({ pageSize: 20, page: 1 }).then((res) => {
    if (res.code == 0) {
      configListData.value = res.data || [];
      map_init();
    }
  });
};

const map_init = () => {
  map = new BMapGL.Map("map");
  var point = new BMapGL.Point(
    configListData.value[0].map_center_longitude,
    configListData.value[0].map_center_latitude
  );
  map.centerAndZoom(point, configListData.value[0].map_default_zoom);
  map.enableScrollWheelZoom(true);
  map.clearOverlays();
  var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
  map.addControl(scaleCtrl);
  var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
  map.addControl(zoomCtrl);
};

const setAddress = (address) => {
  console.log("地图组件 设置地址", address);
  map.clearOverlays();
  getMap({ address: address }).then((res) => {
    if (res.code == 0) {
      console.log(res.data.longitude);
      var point = new BMapGL.Point(res.data.longitude, res.data.latitude);
      var myIcon = new BMapGL.Icon(
          "/src/assets/images/map/data.png",
          new BMapGL.Size(38, 50),  // 图标大小（默认19x25的2倍）
          {
            anchor: new BMapGL.Size(19, 50),  // 图标的定位锚点
            imageSize: new BMapGL.Size(38, 50)  // 图片大小
          }
      );
      var marker = new BMapGL.Marker(point, {
        icon: myIcon,
        enableDragging: true
      });
      map.addOverlay(marker);



      // 监听标记拖动事件
      marker.addEventListener("dragend", function (e) {
        var position = e.target.getPosition();
        console.log(position, "position");
        lng.value = position.lng;
        lat.value = position.lat;

        // 在控制台输出经纬度
        console.log("标记位置更新:");
        console.log("经度: " + lng.value);
        console.log("纬度: " + lat.value);

        // 触发父组件的方法
        emit("location", {
          lng: lng.value,
          lat: lat.value,
        });
      });
    }
  });
};

defineExpose({
  setAddress,
  initMap,
});
</script>
<style scoped lang="scss">
.station-map {
  width: 100%;
  height: 100%;
  background: #ccc;
}
</style>
